<template>
  <div class="running-job-list flex-h flex-center">
    <div class="running-job-box">
      <div class="job-item gallery-item" v-for="(item, i) in list">
        <div class="job-item-inner flex-v flex-center">
          <el-image
            :src="item.picUrl"
            fit="cover"
            loading="lazy"
            :preview-src-list="list.map(d=>d.picUrl)"
            :initial-index="i"
          >
            <!-- <template #placeholder>
              <div class="image-slot">正在加载图片</div>
            </template> -->

            <template #error>
              <div class="image-slot">
                <el-icon>
                  <Picture />
                </el-icon>
              </div>
            </template>
          </el-image>
          <div class="icon-box flex-h flex-center" @click="download(item.picUrl)">
            <el-icon>
              <Download />
            </el-icon>
            下载
          </div>
          <!-- <div class="progress">
            <el-progress type="circle" :percentage="item.progress" :width="100"
                         color="#47fff1"/>
          </div> -->
        </div>
        <!-- <el-image fit="cover" v-else>
          <template #error>
            <div class="image-slot">
              <i class="iconfont icon-quick-start"></i>
              <span>生成失败</span>
            </div>
          </template>
        </el-image> -->
      </div>
    </div>
    <!-- <el-empty :image-size="300" description="快去生成你的创意吧～" v-else /> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import { CircleCloseFilled, Picture, Download } from "@element-plus/icons-vue";
import { isImage, removeArrayItem, substr } from "@/utils/libs";
import { FormatFileSize, GetFileIcon, GetFileType } from "@/store/system";
import { downloadImage } from "@/utils/dom";
const { list, raw } = defineProps({
  list: {
    default: [],
  },
  raw: {
    default: {},
  },
});

const download = (item) => {
  downloadImage(item, raw?.prompt || +new Date());
};
</script>

<style scoped lang="stylus">
@import "../assets/css/running-job-list.styl"
</style>
